<template>
  <div id="translate">
    <div class="language" v-on:click="slectlanguage">
      <div class="thelang" ><div>{{atuolanguage}}</div><div id="down">&nbsp;&#xe653;&nbsp;</div></div>
    </div>
    <div class="select">
      <div class="tral auto" v-on:click="langauto" >自动检测</div>
      <div class="tral lange" v-on:click="lange">英语>中文</div>
      <div class="tral langz" v-on:click="langz">中文>英语</div>
    </div>
    <textarea  placeholder="请输入你要翻译的内容" v-model="content" v-on:change="youdao"></textarea>

    <div  v-if="translation" class="part">
      <div v-if="err">{{err}}</div>
      <div class="title">译文</div>
      <div class="content" v-for="tra in translation">
        <span>{{tra}}</span>
      </div>
      <div>
        <span v-if="query">{{query}}</span><span v-if="fayin" class="fayin">&#xe615;[{{fayin}}]</span>
      </div>
    </div>
    <div v-if="explain" class="part">
      <div class="title">词典释义</div>
      <div v-for="ex in explain">{{ex}}</div>
    </div>
    <div v-if="connectword" class="part">
      <div class="title">相关词汇</div>
      <div v-for="(cw,i) in connectword">
        <div class="webword">{{i+1}}.{{cw.key}}</div>
        <div class="webwordva"><span v-for="va in cw.value">{{va}},</span></div>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  export default {
    name: 'translate',
    data:function(){
    return {
      content: '',
      atuolanguage: '自动检测',
      translation:null,
      fayin:null,
      explain:null,
      connectword:null,
      query:null,
      err:null,
    }
  }
  ,
  methods:{
//    baidu:function () {
//      if(this.content.length>0){
//        var that = this
//        var str = that.content
//        var appid = '20170322000042861';
//        var key = 'QPOsmtoTJhkx4TCj4fVw';
//        var salt = (new Date).getTime();
//        var query = str;
//        var from = '';
//        var to = '';
//        var str1 = appid + query + salt + key;
//        if(that.atuolanguage=="自动检测"){
//          if (/[\u4E00-\u9FA5]/i.test(str)) {
//            from = 'zh'
//            to = 'en'
//          } else {
//            from = 'en';
//            to = 'zh';
//          }
//        }else if(that.atuolanguage=="英语>中文"){
//          from = 'en';
//          to = 'zh';
//        }else if(that.atuolanguage=="中文>英语") {
//          from = 'zh'
//          to = 'en'
//        }
//        var sign = MD5(str1);
//        $.ajax({
//          url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
//          type: 'get',
//          dataType: 'jsonp',
//          data: {
//            q: query,
//            appid: appid,
//            salt: salt,
//            from: from,
//            to: to,
//            sign: sign
//          },
//          success: function (data) {
//            var dst = data.trans_result[0].dst
//            that._data.translate_result = dst
//            console.log(data)
//          }
//        });
//      }
//
//    },
    youdao:function(){
      if(this.content.length>0){
        var that=this
        var a=this.content
        $.ajax({
          url: 'http://fanyi.youdao.com/openapi.do',
          type: 'get',
          dataType: 'jsonp',
          data: {
            keyfrom:'liaovue',
            key:'165216059',
            q:a,
            type:'data',
            doctype:'jsonp',
            version:'1.1'
          },
          success: function (data) {
            if(data.errorCode==0){
              that.err=null
              if(data.query!=undefined&&data.basic!=undefined&&data.basic.phonetic!=undefined){
                that.query=data.query
              }
              if(data.translation!=undefined){
                that.translation=data.translation
              }
              if(data.basic!=undefined&&data.basic.phonetic!=undefined){
                that.fayin=data.basic.phonetic
              }
              if(data.basic!=undefined&&data.basic.explains!=undefined){
                that.explain=data.basic.explains
              }
              if(data.web!=undefined){
                that.connectword=data.web
              }
            }else if(data.errorCode==20){
              that.err="翻译的文本过长"
            }else if(data.errorCode==30){
              that.err="无法进行有效的翻译"
            }
            else if(data.errorCode==40){
              that.err="不支持的语言类型"
            }
            else if(data.errorCode==50){
              that.err="无效的key"
            }
            else if(data.errorCode==60){
              that.err="无词典结果，仅在获取词典结果生效"
            }
          }
        });
      }else{
      }
    },
    slectlanguage:function () {
      if($(".select").css("height")=="0px"){
        $("#down").css({transform:"rotate(180deg)"})
        $(".select").css({height:"153px"})
      }else{
        $("#down").css({transform:"rotate(360deg)"})
        $(".select").css({height:"0px"})
      }

    },
    langauto:function(){
      this.atuolanguage='自动检测'
      $(".auto").css('color',"#f76c41")
      $(".lange").css('color',"#888888")
      $(".langz").css('color',"#888888")
      $(".select").css({height:"0px"})
      $("#down").css({transform:"rotate(360deg)"})
    },
    lange:function(){
      this.atuolanguage='英语>中文'
      $(".auto").css('color',"#888888")
      $(".lange").css('color',"#f76c41")
      $(".langz").css('color',"#888888")
      $(".select").css({height:"0px"})
      $("#down").css({transform:"rotate(360deg)"})
    },
    langz:function(){
      this.atuolanguage='中文>英语'
      $(".auto").css('color',"#888888")
      $(".lange").css('color',"#888888")
      $(".langz").css('color',"#f76c41")
      $(".select").css({height:"0px"})
      $("#down").css({transform:"rotate(360deg)"})
    },
  }
  }
</script>
<style scoped>
  @font-face {
    font-family: 'liaofont';
    src: url("./../../static/iconfont.woff");
  }
.language{
  width: 100%;
  font-family:liaofont;
  overflow: hidden;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  text-align: center;
  -webkit-transition: all .1s linear;
  background-color: #f76c41;
  color: white;
}
.thelang{
  float: left;
  margin-left: 38%;
}
.thelang>div{
  float: left;
}
.tral{
  line-height: 40px;
  width: 100%;
  border-bottom: 1px solid #c7c7c7;
  color: #888888;
}
  textarea{
    resize: none;
    outline: 1px solid #ececec;
    border: none;
    border-radius: 0;
    font-size: 16px;
    height: 8em;
    width: 98%;
    text-indent: 5px;
  }
  .title{
    font-size: 16px;
    margin-bottom: 5px;
    color: #f76c41;
  }
  .webwordva,.fayin{
    color: #b8ada7;
  }
  .part{
    font-size:14px;
    text-align: left;
    margin-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e8;
  }
  .select{
    overflow: hidden;
    background-color: white;
    width: 100%;
    height: 0;
    text-align: center;
    position: absolute;
    -webkit-transition: all .3s linear;
  }
  .fayin{
    font-family: liaofont;
  }
</style>
